
// 远程git弹出
function itemDialog(title, data, cb) {
  showDialog({
    title: title,
    content: ` 
    <div id='form'>
      <div class="form-item">
        <label>项目名称: </label>
        <input type="text"  name='projectName' placeholder="请输入项目名称(建议不要使用中文)" value='${data.projectName || ''}' />
      </div>
      <div class="form-item"> 
        <label>git地址: </label>
        <input type="text"  name='gitAddress' placeholder="请输入git地址" value='${data.gitAddress || ''}' />
      </div>
      <div class="form-item">
        <label>git分支: </label>
        <input type="text"  name='gitBranch' placeholder="请输入分支名称" value='${data.gitBranch || 'master'}' />
      </div>
      <div class="form-item"> 
        <label>项目装包方式: </label> 
        <select name="installType"  > 
          <option value="" ${data.installType == '' ? 'selected' : ''}>请选择</option>
          <option value="npm install" ${data.installType == 'npm install' ? 'selected' : ''}>npm install</option>
          <option value="cnpm install" ${data.installType == 'cnpm install' ? 'selected' : ''}>cnpm install</option>
          <option value="yarn install" ${data.installType == 'yarn install' ? 'selected' : ''}>yarn install</option>
          <option value="pnpm install" ${data.installType == 'pnpm install' ? 'selected' : ''}>pnpm install</option>
        </select>
        自定义: <input type="text"  name='installType' placeholder="请输入自定义装包方式" value='${data.installType || ''}' />
      </div>
      <div class="form-item">
        <label>打包appkey: </label>
        <input type="text"  name='dcloudAppkey' placeholder="请输入dcloudAppkey" value='${data.dcloudAppkey || ''}' />
      </div>
      <div class="form-item" > 
        <label>key证书获取地址: </label>
       <a href="https://dev.dcloud.net.cn/pages/app/list" target="_blank">https://dev.dcloud.net.cn/pages/app/list</a>
      </div>
      <div class="form-item"> 
        <label>应用包名: </label>
        <input type="text"  name='packageName' placeholder="请输入应用包名 com.xx.xx" value='${data.packageName || ''}' />
      </div>
      <div class="form-item">
        <label>证书别名: </label>
        <input type="text"  name='alias' placeholder="请输入证书别名" value='${data.alias || ''}' />
      </div>
      <div class="form-item">
        <label>证书密码: </label>
        <input type="text"  name='storepass' placeholder="请输入证书密码" value='${data.storepass || ''}' />
      </div>
      <div class="form-item">
        <label>证书文件: </label>
        <span>${data.keystore || ''}</span> &emsp;
        <input type="file" name='keystore' values='${data.keystore || ''}'  />
      </div>
    </div> 
    `,
    confirm: function () {
      // 获取所有的input值所有都要必填 错误提示为placeholder
      const form = document.getElementById('form');
      const inputs = form.querySelectorAll('input');
      const data = {};
      for (let i = 0; i < inputs.length; i++) {
        console.log(inputs[i].value)
        if (inputs[i].value == '' && inputs[i].type != 'file') {
          message({
            type: 'error',
            message: inputs[i].placeholder
          })
          return false;
        } else if (inputs[i].type == 'file' && inputs[i].getAttribute('values') == '') {
          message({
            type: 'error',
            message: '请选择打包证书'
          })
          return false;
        }
        data[inputs[i].name] = inputs[i].type == 'file' ? inputs[i].getAttribute('values') : inputs[i].value
      }
      cb(data)
      return true
    }
  })
}

// 本地不需要git和npm的弹出
function localItemDialog(title, data, cb) {
  showDialog({
    title: title,
    content: ` 
    <div id='form'>
      <div class="form-item">
        <label>项目名称: </label>
        <input type="text"  name='projectName' placeholder="请输入项目名称(建议不要使用中文)" value='${data.projectName || ''}' />
      </div>
      <div class="form-item"> 
        <label>项目路径: </label>
        <input type="text"  name='projectPath' placeholder="请输入项目路径" value='${data.projectPath || ''}' />
      </div>
      <div class="form-item"> 
        <label>项目装包方式: </label> 
        <select name="installType"  > 
          <option value="" ${data.installType == '' ? 'selected' : ''}>请选择</option>
          <option value="npm install" ${data.installType == 'npm install' ? 'selected' : ''}>npm install</option>
          <option value="cnpm install" ${data.installType == 'cnpm install' ? 'selected' : ''}>cnpm install</option>
          <option value="yarn install" ${data.installType == 'yarn install' ? 'selected' : ''}>yarn install</option>
          <option value="pnpm install" ${data.installType == 'pnpm install' ? 'selected' : ''}>pnpm install</option>
        </select>
        自定义: <input type="text"  name='installType' placeholder="请输入自定义装包方式" value='${data.installType || ''}' />
      </div>
      <div class="form-item">
        <label>打包appkey: </label>
        <input type="text"  name='dcloudAppkey' placeholder="请输入dcloudAppkey" value='${data.dcloudAppkey || ''}' />
      </div>
      <div class="form-item" > 
        <label>key证书获取地址: </label>
       <a href="https://dev.dcloud.net.cn/pages/app/list" target="_blank">https://dev.dcloud.net.cn/pages/app/list</a>
      </div>
      <div class="form-item"> 
        <label>应用包名: </label>
        <input type="text"  name='packageName' placeholder="请输入应用包名 com.xx.xx" value='${data.packageName || ''}' />
      </div>
      <div class="form-item">
        <label>证书别名: </label>
        <input type="text"  name='alias' placeholder="请输入证书别名" value='${data.alias || ''}' />
      </div>
      <div class="form-item">
        <label>证书密码: </label>
        <input type="text"  name='storepass' placeholder="请输入证书密码" value='${data.storepass || ''}' />
      </div>
      <div class="form-item">
        <label>证书文件: </label>
        <span>${data.keystore || ''}</span> &emsp;
        <input type="file" name='keystore' values='${data.keystore || ''}'  />
      </div>
    </div>
    `,
    confirm: function () {
      // 获取所有的input值所有都要必填 错误提示为placeholder
      const form = document.getElementById('form');
      const inputs = form.querySelectorAll('input');
      const data = {};
      for (let i = 0; i < inputs.length; i++) {
        console.log(inputs[i].value)
        if (inputs[i].value == '' && inputs[i].type != 'file') {
          message({
            type: 'error',
            message: inputs[i].placeholder
          })
          return false;
        } else if (inputs[i].type == 'file' && inputs[i].getAttribute('values') == '') {
          message({
            type: 'error',
            message: '请选择打包证书'
          })
          return false;
        }
        data[inputs[i].name] = inputs[i].type == 'file' ? inputs[i].getAttribute('values') : inputs[i].value
      }
      cb(data)
      return true
    }
  })
}



// js 事件代理监听动态创建的file input

window.addEventListener('change', function (e) {
  if (e.target.type == 'file' && e.target.name == 'keystore') {

    // 获取projectName的值
    const projectName = e.target.parentNode.parentNode.querySelector('input[name="projectName"]').value;
    if (!projectName) return message({ type: 'error', message: '请先填写项目名称' })
    VUE.uploadFile({ e, projectName }, (res) => {
      e.target.setAttribute('values', res.originalname)
    })
  }
  // select[name="installType"]
  console.log(e.target.type, e.target.name)
  if (e.target.type == 'select-one' && e.target.name == 'installType') {
    const value = e.target.value;
    const input = e.target.parentNode.querySelector('input[name="installType"]');
    input.value = value;
  }
})



const CRUD = {

  // 初始化
  init() {

    fetchGet("/data").then((res) => {
      this.leftData = res;
      if (!this.acIndex) this.acIndex = Object.keys(res)[0];
    });
  },
  // 创建项目
  createItem() {

    let iosSDK = this.$refs.iosSDK
    let androidSDK = this.$refs.androidSDK
    if (iosSDK.innerHTML.indexOf('请上传') > -1 && androidSDK.innerHTML.indexOf('请上传') > -1) return message({ type: 'error', message: '请先至少上传一种SDK' })

    showDialog({
      title: '创建方式',
      content: `
      <div class="form-item">
        <label>选择项目创建方式: </label>
        <div style='width:300px;display:flex'>
          <label for='remote' ><input type="radio" id='remote' name='createType' value='remote' checked />git项目</label> 
          <label for='local' ><input type="radio" id='local' name='createType' value='local' />本地项目</label> 
        </div> 
      </div>
      `,
      confirm: () => {
        let createType = document.querySelector('input[name="createType"]:checked').value;
        console.log(createType, 'createType')
        if (createType == 'remote') {
          setTimeout(() => {
            itemDialog('创建项目', {}, data => {
              fetchPost('/data/create', data).then(res => {
                this.init();
              })
            })
          }, 60)

        } else if (createType == 'local') {
          setTimeout(() => {
            localItemDialog('创建项目', {}, data => {
              fetchPost('/data/create', data).then(res => {
                this.init();
              })
            })
          }, 60)

        }
        return true
      }
    })

  },

  // 更新项目
  updateItem(d) {

    if (d.build.Android || d.build.Ios) return message({ type: 'error', message: '项目正在构建中，请稍后再试' })
    if(d.projectPath){
      return localItemDialog('更新项目', d, data => {
        fetchPost('/data/update', { ...data, oldProjectName: d.projectName }).then(res => {
          this.init();
        })
      })
    }

    itemDialog('更新项目', d, data => {
      fetchPost('/data/update', { ...data, oldProjectName: d.projectName }).then(res => {
        this.init();
      })
    })
  },
  // 删除项目
  deleteItem(data) {
    if (data.build.Android || data.build.Ios) return message({ type: 'error', message: '项目正在构建中，请稍后再试' })
    showDialog({
      title: '删除项目',
      content: `
        <div class="form-item">
          请确定是否删除项目:  ${data.projectName}
        </div>
      `,
      confirm: () => {
        fetchPost("/data/delete", data).then((res) => {
          this.init();
        });
        return true
      }
    })

  },
  resetBuild(data) {
    data.build.Android = false;
    data.build.Ios = false;
    data['oldProjectName'] = data.projectName;
    showDialog({
      title: '重置项目',
      content: `
        <div class="form-item">
          请确定是否重置项目:  ${data.projectName}
        </div>
      `,
      confirm: () => {
        fetchPost("/data/update", data).then((res) => {
          this.init();
        });
        return true
      }
    })

  }
}